<template>
	<view :style="{ '--color': color }">
		<navBar title="我的卡包" bgColor="transparent" :transparent="false"></navBar>
		<view class="Content" :style="paddingTop">
			<view
				class="Wrapper"
				@click="tabCurrent(index)"
				v-for="(item, index) in pageData"
				:key="index"
				:class="{
					division: item.current,
					isEnable: !isEnable && index > current,
					Arrow: index == current + 1 && !isEnable && index > current
				}"
			>
				<view class="row j-centert p-bot40" v-if="index == current + 1 && !isEnable">
					<view class="iconfont icon-Upxiangshang29 color_99 size46"></view>
				</view>
				<view class="imgBox">
					<image :src="$imgUrls(item.logo)" mode="aspectFill" class="CardImg"></image>
					<view class="imgBox_content">
						<view class="CredTop">
							<image :src="$imgUrls(item.logo)" mode="aspectFill" class="Logo"></image>
							<view class="d-flex flex-1 f-column j-sa">
								<text class="ellipsis white size32 bold">{{ item.name }}</text>
								<text class="Time white size28">{{ item.expire_time }}</text>
							</view>
						</view>
						<view class="numBox" v-if="item.last_times">
							<text class="Tips">剩余</text>
							<text class="Tips_num">{{ item.last_times }}</text>
							<text class="Tips">次</text>
						</view>
					</view>
				</view>

				<view class="intro" v-if="item.last_times">
					<image :src="$imgUrls(item.logo)" mode="aspectFill" class="Logo"></image>
					<view class="intro_box">
						<text class="ellipsis black size32 bold">{{ item.name }}</text>
						<text class="ellipsis color_99 h6 m-top8">{{ item.desc }}</text>
						<text class="ellipsis color_cc h6 m-top8">{{ item.expire_time }}</text>
					</view>
					<view class="actuality">
						<view class="Use" @click="toUrl(`cardDetails?id=${item.id}`)">使用</view>
						<view class="lineBox">
							<u-line-progress :percentage="schedule(item)" :showText="false" :height="4" activeColor="#ff0000"></u-line-progress>
						</view>
						<text class="residue">剩余 {{ item.last_times }} 次</text>
					</view>
				</view>
			</view>

			<emptys v-if="!pageData.length"></emptys>

			<view class="Footer flex-1" v-if="showFot">
				<view class="d-flex a-center" @click.stop="toUrl(`lose`)">
					<text class="h6 size26 color_66">已失效的</text>
					<view class="iconfont icon-a-zujian32 color_66 h7"></view>
				</view>
				<!-- <view class="switchover" @click="toUrl(`exchange`)">
					<view class="iconfont icon-qiehuan size40 white bold"></view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			headImg: 'https://msraimgcdn.mogoie.com/6099/1691810360037.jpg',
			list: [
				{
					img: 'http://sraimgcdn2.mogoie.com//Uploads/img2019/7499/6099/20240365f3bfe384740.jpg',
					log: 'https://msraimgcdn.mogoie.com/6099/content/20231027/1698385151758.jpg',
					title: '卡片名称卡片名1111',
					info: '这儿是卡片的摘要说',
					Date: '2025年9月10日到期',
					num: 6,
					percentage: 20,
					show: false,
					shorten: false,
					current: false
				},
				{
					img: 'https://msraimgcdn.mogoie.com/6099/content/20231027/1698385151758.jpg',
					log: 'https://msraimgcdn.mogoie.com/6099/1696929502708.jpg',
					title: '卡片名称卡片名2222',
					info: '这儿是卡片的摘要说',
					Date: '2025年05月15日到期',
					num: 5,
					percentage: 60,
					show: false,
					shorten: true,
					current: false
				},
				{
					img: 'https://msraimgcdn.mogoie.com/6099/1696929502708.jpg',
					log: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',
					title: '卡片名称卡片名3333',
					info: '这儿是卡片的摘要说',
					Date: '2025年10月21日到期',
					num: 8,
					percentage: 85,
					show: false,
					shorten: true,
					current: false
				},
				{
					img: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',
					log: 'https://msraimgcdn.mogoie.com/6099/1693813515733.jpg',
					title: '卡片名称卡片名4444',
					info: '这儿是卡片的摘要说',
					Date: '2025年10月21日到期',
					num: 3,
					percentage: 29,
					show: false,
					shorten: true,
					current: false
				}
			],
			current: 0,
			pageData: []
		};
	},
	onLoad() {
		this.timeCardList();
	},
	methods: {
		timeCardList() {
			this.$http
				.get({
					url: '/TimeCardApi/newTimeCardList',
					data: {
						mine: 1
					}
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data;
					this.info = result.info;
					this.pageData = result.list || [];
				});
		},
		tabCurrent(index) {
			this.list.forEach((item) => {
				item.current = false;
			});
			this.list[index].current = true;
			this.current = index;
		},

		schedule(item) {
			const Use = Number(item.all_times) - Number(item.last_times);
			const result = Math.round((Use / Number(item.all_times)) * 100);
			console.log(result);
			return result;
		}
	},

	computed: {
		...mapState(['color', 'totalHeight']),

		paddingTop() {
			return `padding-top:${this.totalHeight + 10}px`;
		},
		isEnable() {
			let Flag = this.list.every((item) => !item.current);
			return Flag;
		},
		showFot() {
			if (this.isEnable || this.current + 1 == this.list.length) {
				return true;
			} else {
				return false;
			}
		}
	}
};
</script>

<style>
page {
	background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.Content {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	padding-left: 30rpx;
	padding-right: 30rpx;
	display: flex;
	flex-direction: column;
}

.division {
	flex: 1;
}

.Arrow {
	height: 250rpx !important;
}

.icon-Upxiangshang29 {
	animation-name: fadeInOut;
	animation-duration: 2s;
	/* 动画持续时间 */
	animation-iteration-count: infinite;
	/* 动画无限循环 */
}

@keyframes fadeInOut {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

.isEnable {
	height: 160rpx;
	margin-top: -80rpx !important;
	overflow: hidden;

	.Time {
		opacity: 0;
	}
}

.Wrapper:first-child {
	margin-top: 0;
}

.Wrapper {
	width: 100%;
	margin-top: -200rpx;
	transition: flex 0.5s ease;

	.imgBox {
		width: 100%;
		height: 350rpx;
		position: relative;
		overflow: hidden;
		border-radius: 10rpx;

		.CardImg {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}

		.imgBox_content {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			padding: 20rpx;

			.CredTop {
				width: 100%;
				display: flex;
			}

			.numBox {
				padding: 2rpx 14rpx;
				background-color: rgba(0, 0, 0, 0.5);
				color: #ffffff;
				border-radius: 10rpx;

				.Tips {
					font-size: 24rpx;
				}

				.Tips_num {
					font-size: 30rpx;
					margin: 0 4rpx;
				}
			}
		}
	}

	.intro {
		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;

		overflow: hidden;
		padding: 24rpx;

		&_box {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.actuality {
			display: flex;
			flex-direction: column;
			align-items: center;

			.Use {
				width: 160rpx;
				height: 60rpx;
				border-radius: 10rpx;
				background-color: var(--color);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				font-size: 26rpx;
			}

			.lineBox {
				width: 170rpx;
				margin-top: 10rpx;
			}

			.residue {
				margin-top: 10rpx;
				color: #999;
			}
		}
	}

	.Logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
}

.Footer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding-top: 40rpx;
	padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

	.switchover {
		width: 70rpx;
		height: 70rpx;
		background-color: var(--color);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
